$mb: 15px !default;
$border: #ccc;

@mixin form {
	.control {
		@include clearfix;
		position: relative;
		margin-bottom: $mb;
		> label {
			float: left;
			line-height: $h;

			// margin-top: 8px;
			width: $label-width;
			text-align: right;
			color: $label-color;
		}
		> .field,
		> .btns {
			margin-left: $label-width + 10px;
		}
	}


	.input-text {
		@include dib;
		border: 1px solid $border;
		width: 220px;
		border-radius: 5px;
		input[type="text"],
		input[type="password"] {
			padding: 0 10px;
			width: 100%;
			height: $h - 2px;
			font-size: 14px;
			border: none;
			color: #444;
		}

		&.s {
			width: 100px;
		}
		&.icon {
			padding-left: 30px;
		}
	}
	
	input[type="file"] {
		margin-top: 5px;
	}
	.btns {
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		button {
			color: #fff;
			border: 0;
			border-bottom: 2px solid #1f1f1f;
		}
		.button {
			padding: 0 30px;
			height: 38px;
			font-size: 18px;
			background-color: #323a4a;
			border-radius: 4px;
			&:hover {
				background-color: darken(#323a4a, 5%);
				border-bottom: 2px solid darken(#1f1f1f, 4%);
			}
		}
	}

	.control.text {
		margin-bottom: 0;
		> .field {
			margin-left: 10px;
			font-size: 13px;
			input[type="checkbox"] {
				margin-bottom: 1px;
			}
		}
	}
}

.form-help {
	display: none;
	margin-bottom: 10px;
	background-color: #f2dede;
	padding: 8px 35px 8px 14px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	border: 1px solid #eed3d7;
	border-radius: 4px;
	.help {
		color: #b94a48;
		font-size: 13px;
	}
}

.help-inline {
	margin-bottom: 5px;
	font-size: 13px;
	color: #b94a48;
}
